.role-item {
  position: relative;
  display: flex;
  padding: 20rpx 0;
  margin: 0 30rpx;
  background-color: #fff;

  .role-avatar {
    flex-shrink: 0;
    position: relative;
    width: 138rpx;
    height: 190rpx;
    overflow: hidden;
    object-fit: cover;
    border-radius: 6rpx;
    background-color: rgba(#f5f5f5, 0.45);
  }

  .role-info {
    flex: 1;
    margin-left: 28rpx;

    .role-name {
      font-size: 32rpx;
      color: var(--color-text-primary);
    }

    .info-item {
      font-size: 28rpx;
      line-height: 46rpx;
      color: var(--color-text-secondary);

      &.info {
        margin-top: 6rpx;
        font-size: 24rpx;
        line-height: 1.6;
      }
    }

    .role-brief {
      margin-top: 26rpx;
      white-space: normal;
      font-size: 24rpx;
      line-height: 40rpx;
      color: var(--color-text-secondary);
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-align: justify;
    }
  }
}

.tag {
  height: 46rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  color: var(--color-text-secondary);
  padding-top: 12rpx;
}